import React from 'react';
import { Modal, Space } from 'antd';
import { CloseOutlined, RightOutlined } from '#/utils/antdIcons.js';

import styles from './index.less';

// 头部: prepend 前置内容 apend 追加内容
// 弹窗放大: arrow === true 弹窗渲染modalContent或内容
export default ({
  title = '',
  prepend = null,
  apend = null,
  arrow = false,
  modalContent = null,
  children = null,
}) => {
  const [visible, setVisible] = React.useState(false);

  return (
    <div className={styles.box}>
      <div className={styles.box__head}>
        <Space size={16}>
          <div className={styles.box__title}>{title}</div>
          {prepend}
        </Space>
        <Space size={16}>
          {apend}
          {arrow === true && (
            <div className={styles.btn} onClick={() => setVisible(true)}>
              <RightOutlined className={styles.btn_icon} />
            </div>
          )}
        </Space>
      </div>
      <div className={styles.box__cont}>{children}</div>
      {/* 放大 */}
      {arrow === true && (
        <Modal
          width={'80%'}
          visible={visible}
          wrapClassName={styles.box_modal}
          title={
            <div className={styles.box__head}>
              <div className={styles.box__title}>
                {title}
                {prepend}
              </div>
              <Space size={16}>
                {apend}
                <div className={styles.btn} onClick={() => setVisible(false)}>
                  <CloseOutlined className={styles.btn_icon} />
                </div>
              </Space>
            </div>
          }
          getContainer={() => document.getElementById('DaTangDashboard')}
          footer={null}
          centered
          destroyOnClose
          closable={false}
          onCancel={() => setVisible(false)}
        >
          {modalContent || <div data-inmodal="true">{children}</div>}
        </Modal>
      )}
    </div>
  );
};
